<script setup>
import {useI18n} from "vue-i18n";
import {ArrowDown} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";

import {list, isLocale} from '../../lang';
import useStore from '@stores/app.js'

const app = useStore();
const {locale, t} = useI18n();
const route = useRoute();

defineProps({
  size: {
    default: 'default',
    required: false,
    type: String
  }
});

const emits = defineEmits([
  'change'
]);

// 设置记录的语言
if (app.language !== locale.value) {
  setLang(app.language);
}

function setLang(lang) {
  locale.value = lang;
  app.setLang(lang);

  emits('change', lang);

  if (route.meta.title) {
    document.title = t(route.meta.title);
  }
}

</script>

<template>
  <el-dropdown @command="setLang" :size="size">
    <el-button :size="size">
      {{ $t('language') }}
      <el-icon style="margin-left: 5px">
        <arrow-down />
      </el-icon>
    </el-button>

    <template #dropdown>
      <el-dropdown-item
        v-for="item in list"
        :command="item.value"
        :disabled="isLocale(item.value, locale)">
        {{ item.label }}
      </el-dropdown-item>
    </template>
  </el-dropdown>
</template>

<style scoped>

</style>
